@<template>
        <nav-bar class="detail-navbar" > 
            <div class="left-detail-navbar" slot='left_bar' @click="goBack">
                <img src="~assets/img/common/back.svg" alt="">
            </div>

            <div class="mid-detail-navbar" slot="mid_bar">
                 <div class="mid-detail-navbar-item"  
                 v-for="(item, index ) in detailCategory" 
                 :key="index" 
                
                 >
                     <span @click="tochose(index)"
                :class="{activenav:currentIndex==index}">{{item}}</span>
                 </div>
            </div>
            <div class="right-detail-navbar" slot='right_bar'>
               
            </div>
                
           
        </nav-bar>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'

export default {
    
    components: {
        NavBar,
    },
    data(){
        return {
            detailCategory: ['详情', '参数', '评论', '推荐'],
            currentIndex: 0,
        }
    },
    methods: {
        tochose(index){
            this.currentIndex = index;
            this.$emit('gothere', index)
        },
        goBack() {
            this.$router.go(-1)
        }
    }

}
</script>

<style>

.detail-navbar {
    /* position: sticky;
    left: 0;
    top: 0; */
    position: relative;
    z-index: 3;
    line-height: 44px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.1);

}


.mid-detail-navbar {
    display: flex;
    
    
}
.mid-detail-navbar-item {
    flex: 1;
}
.left-detail-navbar,
.right-detail-navbar{
    width: 60px;
    height: 44px;
}
.left-detail-navbar {
    padding-top:5px;
}
.activenav {
    color: red;
}
</style>